<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2不便之处</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in array">{{item}}</li>
        </ul>
        <span>{{object.name}}</span>
        <button @click="updateData2">修改数据</button>
        <button @click="addData2">新增数据</button>
        <button @click="deleteData2">删除数据</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                array: [1,2,3],
                object: {
                    name: '之豪'
                }
            },
            methods: {
                // 实际值改变，页面未渲染
                updateData(){
                    console.log(this.array); // [1, 2, 3]
                    this.array[1] = '我被修改';
                    console.log(this.array); // [1, '我被修改', 3]
                },
                // 实际值新增，页面未渲染
                addData(){
                    this.array[3] = 1;
                    console.log(this.array); // [1, 2, 3, 1]
                },
                // 实际值删除，页面未渲染
                deleteData(){
                    delete this.object.name;
                    console.log(this.object.name); // undefind
                },

                // 实际值改变，页面同步渲染
                updateData2(){
                    console.log(this.array); // [1, 2, 3]
                    this.$set(this.array, 1, '我被修改');
                    console.log(this.array); // [1, '我被修改', 3]
                },
                // 实际值新增，页面同步渲染
                addData2(){
                    this.$set(this.array,4,4);
                    console.log(this.array); // [1, 2, 3, 1]
                },
                // 实际值删除，页面同步渲染
                deleteData2(){
                    this.$delete(this.object, 'name');
                    console.log(this.object.name); // undefind
                },
            },
        })
    </script>
</body>
</html>